<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <title>oh my echarts</title>
    <script src="js/echarts.js"></script>
  </head>

  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
          color: ['red', 'green', 'blue', 'goldenrod', 'grey', '#FA8072'],
          tooltip: {trigger: 'axis'},
          legend: {data:['蒸发量','降水量','最低气温','最高气温']},
          toolbox: {
            show: true,
            feature: {
              mark: {show: true}, dataView: {show: true},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true}, saveASImage: {show: true}
            }
          },

          xAxis:[
            {
              type: 'category', position: 'bottom', boundaryGap: true, show: true,
              axisLine: { lineStyle: {color: 'green', type: 'solid', width: 2}},
              axisTick: {show: true, lineStyle: {color: 'red', type: 'solid', width: 2}},
              axisLabel: {
                  show: true, interval: 'auto', rotate: 45, margin: 8,
                  formatter: '{value}月',
                  textStyle: {color: 'blue', fontFamily: 'sans-serif', fontSize: 15, fontStyle: 'italic', fontWeight: 'bold'}
              },
              splitLine: {show: true, lineStyle: {color: '#483d8b', type: 'dashed', width: 1}},
              splitArea: {show: true, areaStyle: {color: ['rgba(144, 238, 144, 0.3)', 'rgba(135, 200, 250, 0.3)']}},
              data: [
                '1', '2', '3', '4', '5',
                {value: '6', textStyle: {color: 'red', fontSize: 30, fontStyle: 'normal', fontWeight: 'bold'}},
                '7', '8', '9', '10', '11', '12'
              ]
            },

            {
              type: 'category',
              data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
          ],

          yAxis:[
            {
              type: 'value', position: 'left', boundaryGap: [0, 0.1],
              axisLine: {show: true, lineStyle: {color: 'red', type: 'dashed', width: 2}},
              axisTick: {show: true, length: 10, lineStyle: {color: 'green', type: 'solid', width: 2}},
              axisLabel: {
                show: true, interval: 'auto', rotate: -45, margin: 8,
                formatter: '{value} ml',
                textStyle: {color: '#1e90ff', fontSize: 10, fontWeight: 'bold', fontFamily: 'verdana', fontStyle: 'normal'}
              },
              splitLine: {show: true, lineStyle: {color: '#483d8b', type: 'dotted', width: 2}},
              splitArea: {show: true, areaStyle: {color: ['rgba(205, 92, 92, 0.3)', 'rgba(255, 215, 0, 0.3)']}}
            },

            {
              type: 'value', splitNumber: 10,
              axisLabel: {
                formatter: function (value) {
                  return value + ' °C';
                }
              },
              splitLine: {show: false}
            }
          ],

          series: [
            {
              name: '蒸发量', type: 'bar',
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },

            {
              name: '降水量', type: 'bar',
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },

            {
              name: '最低气温', type: 'line',
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 23.0, 6.2]
            },

            {
              name: '最高气温', type: 'line', smooth: true, yAxisIndex: 1,
              data: [12.0, 12.2, 13.3, 14.5, 16.3, 18.2, 28.3, 33.4, 31.0, 24.5, 18.0, 16.2]
            }
          ]
        };
  
        // 使用刚指定的配置项和数据显示图表。
        //main.xAxis.axisLabel.formartter = '{value}月';
        //main.yAxis.
        myChart.setOption(option);
      </script>
  </body>
</html>